<template>
    <el-dialog title="瀑布图" :visible.sync="isShow" width="70%" :lock-scroll="true" :show-close="false">
        <!-- 瀑布图 -->
        <div class="track" ref="fallWave1"></div>
    </el-dialog>
</template>

<script>
import * as echarts from 'echarts'
import { specDataGetlistApi } from '@/requset/api'

export default {
    data() {
        return {
            isShow: false,
            spectrumData: [],
            spectrumFre: [],
        }
    },
    props: {
        sensorInfo: {
            type: Object,
            default() {
                return {}
            },
        },
        tagSelected: {
            type: Object,
            default() {
                return null
            },
        },
        date_time: {
            type: Array,
            default() {
                return []
            },
        },
    },
    methods: {
        getData(nickname) {
            return new Promise((resolve) => {
                specDataGetlistApi({
                    id: this.sensorInfo.id,
                    time: this.dayjs(this.date_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                    feature_key: nickname + 'Fre',
                    limit: 8,
                }).then((res) => {

                    if (res.data.code != 0) return
                    this.spectrumFre = res.data.data.reverse()
                    specDataGetlistApi({
                        id: this.sensorInfo.id,
                        time: this.dayjs(this.date_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                        feature_key: nickname + 'Data',
                        limit: 8,
                    }).then((res) => {

                        if (res.data.code != 0) return
                        this.spectrumData = res.data.data.reverse()
                        resolve()
                    })
                })
            })
        },
        showFallWave() {
            if (this.tagSelected) {
                let value = this.tagSelected.value
                if (value.includes('频谱')) {
                    this.getData(this.tagSelected.nickname).then(() => {

                        if (this.spectrumData.length == 0 || this.spectrumFre.length == 0) {
                            this.$message.info('该时间段暂无数据')
                            return
                        }
                        this.isShow = true
                        this.$nextTick(() => this.draw())
                    })
                } else this.$message.info('请选择频谱')
            } else {
                this.$message.info('请选择频谱')
            }
        },
        draw() {
            let ref = this.$refs.fallWave1
            let myChart = echarts.init(ref)
            if (myChart) {
                myChart.clear()
                ref.removeAttribute('_echarts_instance_')
            }
            let data = []
            let data1 = []
            let times = []
            for (let i in this.spectrumData) {
                data1 = []
                for (let x in this.spectrumFre[i].value) {
                    data1.push([this.spectrumFre[i].value[x], this.spectrumData[i].times[x].slice(0, 19), this.spectrumData[i].value[x]])
                }
                times.push(this.spectrumFre[i].time)
                data.push({
                    type: 'line3D',
                    name: this.spectrumFre[i].time,
                    lineStyle: {
                        width: 2,
                    },
                    data: data1,
                })
            }

            let option = {
                tooltip: {
                    formatter: (p) => {
                        return `
                        时间：${p.data[1]}
                        <br />频率：${p.data[0]}
                        <br />振幅：${p.data[2]}
                        `
                    },
                },
                xAxis3D: {
                    name: '频率',
                    nameTextStyle: {
                        color: 'aqua',
                    },
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: 'aqua',
                        },
                    },
                    axisPointer: {
                        lineStyle: {
                            color: '#fff',
                            width: 0.6,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#B2E3FF',
                            width: 0.6,
                        },
                    },
                },
                yAxis3D: {
                    name: '',
                    nameTextStyle: {
                        color: 'aqua',
                    },
                    type: 'category',
                    axisLabel: {
                        // formatter: (params) => params.slice(0, 19),
                        textStyle: {
                            color: 'aqua',
                        },
                    },
                    splitNumber: this.spectrumFre.length,
                    axisPointer: {
                        show: false,
                        lineStyle: {
                            color: '#fff',
                            width: 0.6,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#B2E3FF',
                            width: 0.6,
                        },
                    },
                },
                zAxis3D: {
                    name: '振幅',
                    nameTextStyle: {
                        color: 'aqua',
                    },
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: 'aqua',
                        },
                    },
                    axisPointer: {
                        show: false,
                        lineStyle: {
                            color: '#fff',
                            width: 0.6,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#B2E3FF',
                            width: 0.6,
                        },
                    },
                },
                grid3D: {
                    boxHeight: 60,
                    boxWidth: 250,
                    boxDepth: 60,
                    viewControl: { center: [0, -30, -15], alpha: 30, beta: 0 },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#B2E3FF',
                            width: 0.4,
                            type: 'dotted',
                        },
                    },
                },
                series: [...data],
            }

            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
    },
    watch: {
        isShow: {
            handler(newVal) {
                if (!newVal) {
                    this.spectrumData = []
                    this.spectrumFre = []
                }
            },
        },
    },
}
</script>

<style lang="less">
.track {
    width: 100%;

    height: 60vh;
}
</style>
